<script setup lang="ts">
  import RightHeader from '@/views/DigitalTwin/right/rightHeader.vue';
  // import RightContent from '@/views/DigitalTwin/right/rightContent.vue';
  // import SceneComponent from '@/components/DigitalTwin/RightSplit/SceneComponent.vue';
  // import AnimationComponent from '@/components/RightSplit/AnimationComponent.vue';
  // import DataComponent from 'src/components/RightSplit/DataComponent.vue';
  // import StateComponent from '@/components/RightSplit/StateComponent.vue';
  import { ref } from 'vue';
  import CenterHeader from '@/views/DigitalTwin/center/centerHeader.vue';
  // 定义一个响应式状态来存储当前应该渲染的组件名
  const currentComponent = ref<string | null>(null);
  const componentMap = {
    //基础组件
    0: 'BasicComponent',
    // 场景组件
    1: 'SceneComponent',
    // 动画组件
    2: 'AnimationComponent',
    // 数据组件
    3: 'DataComponent',
    // 状态组件
    4: 'StateComponent',
  };

  // 一个函数，用于根据点击的 label 更新 currentComponent 的值
  const selectComponent = (index) => {
    console.log('receive: index: ');
    currentComponent.value = componentMap[index] as string;
    console.log(currentComponent.value);
  };
  const showChildMessage = (message) => {
    console.log('receive: index: ');
    alert(message);
  };
</script>

<template>
  <RightHeader @childMessage="showChildMessage" />
  <!--  <right-content v-if=""></right-content>-->
  <!--  <component :is="currentComponent" v-if="currentComponent"></component>-->
  <!--  <right-content v-else></right-content>-->
  <div>
    <!-- 显示选择的组件 -->
    <component :is="currentComponent" />
  </div>
</template>

<style scoped></style>
